<!--
 * @Descripttion: 课堂分析详情-其他内容-知识要点
 * @version: V1.0.0.1
 * @Author: zhaozhenzhuo
 * @Date: 2025-10-30 16:39:04
 * @LastEditors: zhaozhenzhuo
 * @LastEditTime: 2025-10-30 16:39:04
-->
<template>
	<div class="knowledge-point-wrapper">
		<div class="module-title-wrapper">
			<p>知识要点</p>
			<img v-if="false" src="@/assets/images/lessonAnalysisDetails/text-edit-normal.png" />
		</div>
		<div class="detail">
			<p>
				本堂课共讲解知识点<span v-if="knowledgePointList" class="active"
					>{{ knowledgePointList.length }}个</span
				><span v-else class="active">-个</span
				><span v-if="knowledgePointList && knowledgePointList.length"
					>，分别是<span v-for="(item, index) in knowledgePointList" :key="index"
						>{{ item.name }}（<span class="active">{{ item.value }}次</span>）<span
							v-if="index !== knowledgePointList.length - 1"
							>、</span
						></span
					></span
				>。
			</p>
		</div>
		<div v-if="knowledgePointList && knowledgePointList.length" class="knowledge-chart"></div>
	</div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import { nextTick, ref, watch, onMounted, shallowRef, onUnmounted } from 'vue';
import { getErrorMessage, getKeyWordResultAPI } from '@/api/index';
import { KnowledgePointItemType } from './KnowledgePoint.type';

const props = withDefaults(
	defineProps<{
		lessonCode: string;
	}>(),
	{
		lessonCode: ''
	}
);

const emit = defineEmits<{
	(e: 'changeVideoTime', time: number): void; // 切换视频时间
	(e: 'searchTextBoard', name: string): void; // 搜索文本板
}>();

watch(
	() => props.lessonCode,
	(val) => {
		if (val) {
			nextTick(() => {
				getKnowledgePointList();
			});
		}
	},
	{ immediate: true }
);

onMounted(() => {
	window.addEventListener('resize', resizeHandler);
});

onUnmounted(() => {
	window.removeEventListener('resize', resizeHandler);
	if (chart.value) {
		chart.value.dispose();
	}
});

const resizeHandler = () => {
	setTimeout(() => {
		if (chart.value) {
			chart.value.resize();
		}
	}, 300);
};

// 知识点列表
const knowledgePointList = ref<KnowledgePointItemType[]>([]);
// 知识点数量
const knowledgePointCount = ref(0);
// 查询知识点
const getKnowledgePointList = async () => {
	try {
		let data = await getKeyWordResultAPI({
			businessCode: props.lessonCode
		});

		if (data && data.length) {
			// 排序
			data.sort((a, b) => {
				return b.countNum - a.countNum;
			});
			// 默认展示前十个
			data = data.splice(0, 10);
			// 整理数据
			knowledgePointList.value = [];
			knowledgePointCount.value = 0;
			data.forEach((item) => {
				knowledgePointCount.value += item.countNum;
				knowledgePointList.value.push({
					name: item.name,
					value: item.countNum
				});
			});
		} else {
			knowledgePointList.value = [];
		}
		if (knowledgePointList.value && knowledgePointList.value.length) {
			nextTick(() => {
				initKnowledgePointChart();
			});
		}
	} catch (err) {
		console.error(getErrorMessage(err));
	}
};

// echarts对象
const chart = shallowRef<echarts.ECharts | null>(null);
// 初始化知识点词云
const initKnowledgePointChart = () => {
	if (chart.value) {
		chart.value.dispose();
	}
	chart.value = echarts.init(document.querySelector('.knowledge-chart') as HTMLElement);
	// 定义词云图的配置项
	const option = {
		grid: {
			left: 0,
			right: 0,
			top: 0,
			bottom: 0
		},
		series: [
			{
				type: 'wordCloud',
				shape: 'circle',
				left: 'center',
				top: 'center',
				right: null,
				bottom: null,
				width: '90%',
				height: '90%',
				gridSize: 10,
				sizeRange: [18, 28],
				rotationRange: [0, 0],
				textStyle: {
					fontFamily: 'Alibaba PuHuiTi',
					fontWeight: 'bold',
					color() {
						const _colorArr = [
							Math.round(Math.random() * 100 + 120),
							Math.round(Math.random() * 100 + 120),
							Math.round(Math.random() * 50 + 180)
						];
						return `rgb(${_colorArr.join(',')})`;
					}
				},
				data: knowledgePointList.value
			}
		]
	};

	// 将配置项设置到 echarts 实例中
	chart.value.setOption(option);
	// 知识点添加点击事件
	chart.value.on('click', (params) => {
		const _item = knowledgePointList.value.find((item) => item.name === params.name);
		if (_item) {
			emit('searchTextBoard', _item.name);
		}
	});
};
</script>

<style lang="scss" scoped>
.knowledge-point-wrapper {
	margin-top: 1.6rem;

	.knowledge-chart {
		width: 100%;
		height: 10rem;
		background-color: rgba($color: $bg-block-color-primary, $alpha: 0.9);
	}
}
</style>
